<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>春季骑行</title>
	<meta name="viewport" content="width=device-width,user-scalable=no" />

<style type="text/css">

* { margin: 0; padding: 0; }
body, html, ul, li { margin: 0; padding: 0; }
@font-face { font-family: KMedium; src: url('<?php echo $this->config->item('public_url');?>config->item('public_url');?>/winter_act/css/KMedium.ttf'); }
body { max-width: 640px; margin: 0 auto; font-family: KMedium; font-size: 14px; min-height: 100%; display: block; background-color: #dff3fe;
	/*background-image: url(<?php echo $this->config->item('public_url');?>config->item('public_url');?>/winter_act//images/sping_sharebg.png); background-position: center; background-size: cover;  */
}
.body { width: 100%; height: 100%; overflow: hidden; display: block; position: relative; }
html { height: 100%; }
.fixed_share{  width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 1 }
.icon_name{ width: 93px; height: 138px; margin: 0 auto;   background-image: url(<?php echo $this->config->item('public_url');?>config->item('public_url');?>/winter_act//images/icon.png); background-size: 100%; background-repeat: no-repeat; margin-top: 45px; }
.icon_name img{ width: 87px; height: 87px; margin:3px; }
.icon_title{ width: 100%; text-align: center; line-height: 34px; font-size: 15px; }
.share_icon img{ width: 41px; }
.shareleft ,.shareright{ text-align: center; width: 50%; float: left; position: relative; margin-top:   50px; }
.shareleft .t,.shareright .t{ text-align: center;color: #5d91d2; margin-top: 9px; margin-bottom: 9px; font-size: 12px; }
.nb{ font-size: 30px; color: #5d91d2;}
.nb span{ font-size: 15px; }
.share_btn{ position: absolute; width: 100%; height: 56px;  display: table; left: 0; bottom: 0; background-color: #98c1ee;}
.share_btn li{ float: left; list-style: none; margin: 13px 15px; }
.share_btn img{ width: 32px; cursor: pointer;}
.share_btn ul{width: auto; margin: 0 auto; display: table;}
.sharebg_img{width: 100%; height: 100%; position: relative; left: 0; top: 0}
.f_img{ width: 100%; text-align: center; position: absolute; bottom: 20px;}
.f_img img{ width: 39px; height: 39px; }
.f_img .f_imgp{ margin-top: 8px; color: #333333 ; font-size: 14px; width: 100%; text-align: center;}
	</style>
<script src="<?php echo $this->config->item('public_url');?>/winter_act/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="<?php echo $this->config->item('public_url');?>/winter_act/js/html2canvas.js"></script>
<script type="text/javascript" src="<?php echo $this->config->item('public_url');?>/winter_act/js/WebViewJavascriptBridge_JS.js"></script>
	</head>
	<body>

<img  class="sharebg_img" src="<?php echo $this->config->item('public_url');?>/winter_act/images/spring_share_bj.png" alt="">
<!-- 分享 -->
<div class="fixed_share">

	<div class="icon_name">
	<?php if ($avatar){?>
		<img src="<?php echo $avatar?>" alt="">
		<?php }else {?>
		<img src="<?php echo $this->config->item('public_url');?>/winter_act/images/logo.png" alt="">
		<?php }?>
		<div class="icon_title"><?php echo $username?></div>
	</div>
	<div class="shareleft">
		<div class="share_icon">
			<img src="<?php echo $this->config->item('public_url');?>/winter_act/images/n.png" alt="">
			<p class="t">今日获得</p>
			<div class="nb">
				<?php echo $desc;?>
				<span>N</span>
			</div>
		</div>
	</div>
	<div class="shareright">
		<div class="share_icon">
			<img src="<?php echo $this->config->item('public_url');?>/winter_act/images/b.png" alt="">
			<p class="t">今日里程</p>
			<div class="nb">
				<?php echo $day_mileage;?>
				<span>KM</span>
			</div>
		</div>
	</div>

	<div class="f_img">
		<img src="<?php echo $this->config->item('public_url');?>/winter_act/images/logo.png" alt="">
		<p class="f_imgp">打开Segway-Ninebot App<br>冬季骑行一起浪起来</p>
	</div>
	  <div class="share_btn">
		<ul>
			<li data-id="wf">
				<img  src="<?php echo $this->config->item('public_url');?>/winter_act//images/5.png" alt="">
			</li>

			<li data-id="wx">
				<img  src="<?php echo $this->config->item('public_url');?>/winter_act//images/1.png" alt="">
			</li>
			<li data-id="wb">
				<img  src="<?php echo $this->config->item('public_url');?>/winter_act//images/4.png" alt="">
			</li>
			<li data-id="qq">
				<img  src="<?php echo $this->config->item('public_url');?>/winter_act//images/3.png" alt="">
			</li>
			<li data-id="save">
				<img  src="<?php echo $this->config->item('public_url');?>/winter_act//images/2.png" alt="">
			</li>
		</ul>
	</div>
	
</div>
<script type="text/javascript">
		       function setupWebViewJavascriptBridge(callback) {

		           if (window.WebViewJavascriptBridge) {
			           return callback(WebViewJavascriptBridge); 
		       		}

		           if (window.WVJBCallbacks) { 
			           	return window.WVJBCallbacks.push(callback); 
		           }
		           window.WVJBCallbacks = [callback];
		           var WVJBIframe = document.createElement('iframe');
		           WVJBIframe.style.display = 'none';
		           WVJBIframe.src = 'wvjbscheme://__BRIDGE_LOADED__';
		           document.documentElement.appendChild(WVJBIframe);
		           setTimeout(function() { document.documentElement.removeChild(WVJBIframe) }, 0)
		       }
		       setupWebViewJavascriptBridge(function(bridge) {

    		    	 bridge.registerHandler('h5ShareImg', function(data, responseCallback) {
                     		  //console.log("JS Echo called with:", data)
                     		  $('.share_btn').show()
                     		  responseCallback(data)
                 	 })
		             $(document).on('click', '.share_btn li ', function(event) {
		             	var type_id =$(this).attr('data-id')
		             	$('.share_btn').hide()

		             	 html2canvas(document.body, {
			                 allowTaint: true,
			                 taintTest: false,
			                 onrendered: function(canvas) {
			                     //var dataUrl = canvas.toDataURL();
 			                     bridge.callHandler('h5ShareImg', {"type_id": type_id,"dataImg":''}, function(response) {
 			                     })
			                 },
		             	 });
		         	}) 
				})
		             
</script>
</body>
</html>